<template>
  <div>
    <BasicModal
      :showCancelBtn="false"
      :showOkBtn="false"
      :width="1000"
      :height="600"
      @register="recordModal"
      :destroyOnClose="true"
      @cancel="handleCloseModal"
      :title="`${t('table.member.member_receive_record')} (${setTitle})`"
    >
      <BasicTable @register="restartable">
        <template #form-currentType>
          <FormItemRest>
            <InputGroup class="!flex" compact>
              <Select style="width: 40%" v-model:value="currentType">
                <SelectOption value="username">
                  {{ t('business.common_member_account') }}
                </SelectOption>
              </Select>
              <Input
                style="width: 59%"
                allowClear
                :placeholder="t('common.inputText')"
                v-model:value="fromSearch"
              />
            </InputGroup>
          </FormItemRest>
        </template>
      </BasicTable>
    </BasicModal>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicTable, useTable } from '/@/components/Table';
  import { columns, schemas } from './index.data';
  import { FormItemRest, InputGroup, Select, Input, SelectOption } from 'ant-design-vue';
  import { useMemberStore } from '/@/store/modules/member';
  import { setDateParmas, setDateParmaTime } from '/@/utils/dateUtil';
  import { getReceiveList } from '/@/api/mission';
  import { useI18n } from '/@/hooks/web/useI18n';

  const { t } = useI18n();
  const setTitle = ref('' as any);
  const result = ref('' as any);
  const currentType = ref('username' as any);
  const fromSearch = ref('' as any);
  const memberStore = useMemberStore();
  // 获取层级下拉
  memberStore.getLevelList();
  /** 打开弹出框 */
  const [recordModal] = useModalInner((data) => {
    setTitle.value = JSON.parse(data.names)['zh_CN'];
    result.value = data;
    methods.reload();
  });
  const [restartable, methods] = useTable({
    api: getReceiveList,
    columns,
    showIndexColumn: false,
    bordered: true,
    useSearchForm: true,
    formConfig: {
      schemas,
      showAdvancedButton: false,
      actionColOptions: {
        class: 't-form-label-com',
        span: 1,
      },
      showResetButton: false,
    },
    beforeFetch: (param) => {
      setDateParmaTime(param);
      setDateParmas(param);
      if (currentType.value) {
        param[currentType.value] = fromSearch.value;
      }
      param['id'] = result.value['id'];
      return param;
    },
  });
  function handleCloseModal() {
    fromSearch.value = '';
  }
</script>
